<style>
  h1 {
    margin-bottom: 20px;
    font: 20px/1.5 sans-serif;
  }

  .terminal {
    border: #000 solid 5px;
    font-family: "DejaVu Sans Mono", "Liberation Mono", monospace;
    font-size: 11px;
    color: #f0f0f0;
    background: #000;
  }

  .reverse-video {
    color: #000;
    background: #f0f0f0;
  }
</style>
<%= javascript_include_tag :term %>

<ul id="menu" class="mfb-component--br mfb-zoomin" data-mfb-toggle="hover">
  <li class="mfb-component__wrap">
    <a href="#" class="mfb-component__button--main">
      <i class="mfb-component__main-icon--resting ion-plus-round"></i>
      <i class="mfb-component__main-icon--active ion-close-round"></i>
    </a>
    <ul class="mfb-component__list">
      <li>
        <a href="#" onclick="concentrate()" data-mfb-label="<%= t("challenge_menu.concentration_mode") %>" class="mfb-component__button--child">
          <i id="eyes" class="mfb-component__child-icon ion-eye"></i>
        </a>
      </li>
      <li>
        <a href="#" onclick="hint()" data-mfb-label="<%= t("challenge_menu.hint") %>" class="mfb-component__button--child">
          <i class="mfb-component__child-icon ion-alert"></i>
        </a>
      </li>

      <li>
        <%= form_tag get_agent_details_path, :id => 'shell', :remote => 'true' do %>
            <a href="#" onclick="submitFrmAjax();" data-mfb-label="<%= t("challenge_menu.terminal") %>" class="mfb-component__button--child">
              <i class="mfb-component__child-icon ion-social-tux"></i>
            </a>
        <% end %>
      </li>
    </ul>
  </li>
</ul>

<div class="sp-container">
  <div id="hint">
    <h2><%= raw hint %></h2>
  </div>
</div>

<div class="columns-12">
  <div class="col-12">
    <div class="contains">
      <div class="chal">
        <span class="chal-header"><%= "#{ctl_name}_#{act_name}" %></span>
        <div id="description" class="chal-body" contenteditable="tinymce">
          <h1 class="th1"><%= "#{act_name}" %></h1>
          <h2 class="th2"><%= link_to url, url, :target => "_blank" %></h2>
          <hr>
          <div id="editable">
            <%= chal.content.html_safe %>
            <% if !current_user.nil? && current_user.admin? %>
                <%= render "shared/challenge_content_confirm", :chal_instance => chal, :url_instance => "content_edit" %>
            <% end %>
          </div>
          <hr>
          <div>
            <%= form_tag "/wargame/#{ctl_name}/#{act_name}" do %>
                <%= label_tag :flag %>
                <%= text_field_tag :flag %>
                <%= submit_tag 'Submit', class: 'btn btn-success' %>
            <% end %>
          </div>
        </div>
        <div class="chal-body">
          <div id="terminal"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<%= render 'shared/each_rank', ranked_players: ranked_players, index: index %>

<div id="data-docker-terminal"></div>

<script>

    c = $(".sp-container");
    cc = $("#hint");
    ccc = $("#eyes");
    prev = "";

    function whichAnimationEvent(){
        var t;
        var el = document.createElement('fakeelement');
        var animations = {
            'animation':'animationend',
            '-moz-animation':'animationend',
            '-webkit-animation':'webkitAnimationEnd'
        }

        for(a in animations){
            if( el.style[a] !== undefined ){
              return animations[a];
            }
        }
    }

    var animationEnd = whichAnimationEvent();

    function concentrate() {
        if(c.css("display") == "none") {
            c.css("display", "block");
            ccc.removeClass("ion-eye");
            ccc.addClass("ion-eye-disabled");
        } else {
            c.css("display", "none");
            ccc.removeClass("ion-eye-disabled");
            ccc.addClass("ion-eye");
        }
    }

    function hint() {
        prev = c.css("display");
        c.css("z-index",500);
        if(c.css("display") == "none") {
            c.css("display", "block");
        }
        cc.addClass("sp-content");
        document.getElementsByClassName("sp-content")[0].addEventListener(animationEnd, closeHint, false);
        $(".sp-content h2").css("display", "block");
        $(".sp-content h2").addClass("hint");
    }

    function closeHint() {
        document.getElementsByClassName("sp-content")[0].addEventListener(animationEnd, closeHint, false);
        $(".sp-content h2").removeClass("hint");
        $(".sp-content h2").css("display", "none");
        cc.removeClass("sp-content");
        c.css("z-index", 1);
        c.css("display", prev);
    }
</script>
<script>
  function submitFrmAjax(){
    $.post({
      url : "<%= get_agent_details_path %>",
      data : $("#shell").serialize()
    });
  }
</script>
<script>
  textSize = function () {
    function getCharSize() {
      var $span = $("<span>", {text: "qwertyuiopasdfghjklzxcvbnm"});
      $('#terminal').append($span);
      var size = {
        width: $span.outerWidth()/26
        , height: $span.outerHeight()
      };
      $span.remove();
      return size;
    }
    var charSize = getCharSize();
    var descriptionSize = document.getElementById('description').offsetHeight;
    return {
      result: Math.floor(descriptionSize / charSize.height)
    };
  };
  var rc = textSize();
  window.docker = (function(docker) {
      var div = $('#terminal').empty()[0];
      docker.terminal = {
          startTerminalForContainer: function(host, token) {
              var term = new Terminal({
                rows: rc.result,
                useStyle: true,
                screenKeys: true,
                cursorBlink: false
              });
              term.open(div);

              var wsUri = "wss://" +
                  host +
                  "/v1/exec/?token=" +
                  token;

              var websocket = new WebSocket(wsUri);
              websocket.onopen = function(evt) { onOpen(evt) };
              websocket.onclose = function(evt) { onClose(evt) };
              websocket.onmessage = function(evt) { onMessage(evt) };
              websocket.onerror = function(evt) { onError(evt) };

              term.on('data', function(data) {
                  websocket.send(btoa(data));
              });

              function onOpen(evt) {
              }

              function onClose(evt) {
                  term.write("Session terminated");
              }

              function onMessage(evt) {
                  term.write(atob(evt.data));
              }

              function onError(evt) {
              }
          }
      };
      return docker;
  })(window.docker || {});
</script>
